<template>
  <div class="box-container">
    <div class="box" v-for="(item, index) in list" :key="item.time">{{ item.i }}</div>
  </div>
  <div>
    <button @click="add" style="position:fixed;right:30px;top:100px">添加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    getBottom(fn) {
      let dom = document.querySelector('.box-container')
      let rect = dom.getBoundingClientRect()
      //dom.height - y = dom.bottom
      let bottom = rect.bottom
      let ot = dom.offsetTop
      console.log(ot)
      fn(() => {
        let rect = dom.getBoundingClientRect()
        console.log(rect)
        let y = rect.height - bottom + ot
        document.documentElement.scrollTop = y
      })
    },
    add() {
      this.getBottom((next) => {
        let len = this.list.length
        let addList = []
        for (var i = len; i < len + 10; i++) {
          addList.unshift({
            time: +new Date(),
            i
          })
        }
        this.list = addList.concat(this.list)
        console.log(`helloworld`)

        this.$nextTick((res) => {
          next()
        })
      })
    }
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
